<template>
  <div class="container mx-auto">
    <div class="my-8">
      <vue-glide :perView="1" :bullet="true" class="mb-12">

          <vue-glide-slide>
            <router-link to="/about">
              <img src="@/assets/nav/nav1.jpg" alt="mandalorian" class="rounded" />
            </router-link>
          </vue-glide-slide>

          <vue-glide-slide>
            <router-link to="/about">
              <img src="@/assets/nav/nav2.jpg" alt="mandalorian" class="rounded" />
            </router-link>
          </vue-glide-slide>

          <vue-glide-slide>
            <router-link to="/about">
              <img src="@/assets/nav/nav3.jpg" alt="mandalorian" class="rounded" />
            </router-link>
          </vue-glide-slide>


          <template slot="control">
            <button data-glide-dir="<" class="absolute w-8 h-8 rounded-full bg-gray-500" style="top: calc(50% - 16px); left: 10px">
              <svg width="18" height="18" viewBox="0 0 24 24" style="margin-left: 6px">
                <path d="M0 12l10.975 11 2.848-2.828-6.176-6.176H24v-3.992H7.646l6.176-6.176L10.975 1 0 12z"></path>
              </svg>
            </button>
            <button data-glide-dir=">" class="absolute w-8 h-8 rounded-full bg-gray-500" style="top: calc(50% - 16px); right: 10px">
              <svg width="18" height="18" viewBox="0 0 24 24" style="margin-left: 6px">
                <path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"></path>
              </svg>
            </button>
          </template>
        </vue-glide>

      <div class="categories mb-12">
        <vue-glide
          :perView="5"
          :gap="20"
          :breakpoints="{
            1024: {
              perView: 3
            },
            800: {
              perView: 2,
            },
            576: {
              perView: 1,
              peek: {
                before: 0,
                after: 0,
              }
            }
          }"
        >
          <vue-glide-slide>
            <a href="#bt" class="bg-gray-800 h-32 flex justify-center items-center shadow-custom border border-gray-700 rounded-lg p-4 hover:bg-gray-900">
              <img src="@/assets/svg/bt2.svg" alt="disney"style="height: 120px">
            </a>
          </vue-glide-slide>
          <vue-glide-slide>
            <a  href="#mhsj" class="bg-gray-800 h-32 flex justify-center items-center shadow-custom border border-gray-700 rounded-lg p-4 hover:bg-gray-900">
              <img src="@/assets/svg/mhsj.svg" alt="disney"style="height: 120px">
            </a>
          </vue-glide-slide>
          <vue-glide-slide>
            <a  href="#mrsj" class="bg-gray-800 h-32 flex justify-center items-center shadow-custom border border-gray-700 rounded-lg p-4 hover:bg-gray-900">
              <img src="@/assets/svg/mrsj.svg" alt="disney"style="height: 120px">
            </a>
          </vue-glide-slide>
          <vue-glide-slide>
            <a  href="#wq" class="bg-gray-800 h-32 flex justify-center items-center shadow-custom border border-gray-700 rounded-lg p-4 hover:bg-gray-900">
              <img src="@/assets/svg/wq.svg" alt="disney" style="height: 120px">
            </a>
          </vue-glide-slide>

          <vue-glide-slide>
            <router-link  to="/road" class="bg-gray-800 h-32 flex justify-center items-center shadow-custom border border-gray-700 rounded-lg p-4 hover:bg-gray-900">
              <img src="@/assets/svg/road.svg" alt="disney" style="height: 120px">
            </router-link>
          </vue-glide-slide>


        </vue-glide>
      </div> <!-- end categories -->

      <div class="recommended px-6 mb-12"id="bt">
        <h3 class="text-gray-500 mb-1">宝藏湾 探险岛</h3>
        <vue-glide
          :perView="5"
          :gap="20"
          :peek="{ before: 0, after: 70 }"
          :breakpoints="{
            1024: {
              perView: 3
            },
            800: {
              perView: 2,
            },
            576: {
              perView: 1,
              peek: {
                before: 0,
                after: 0,
              }
            }
          }"
        >
          <vue-glide-slide>
            <router-link to="/about/1"><img src="@/assets/project/ccbzz.webp" alt="star wars"></router-link>
          </vue-glide-slide>
          <vue-glide-slide>
            <router-link to="/about/2"><img src="@/assets/project/cqxst.jpg" alt="snow white"></router-link>
          </vue-glide-slide>
          <vue-glide-slide>
            <router-link to="/about/3"><img src="@/assets/project/txjdmz.webp" alt="black panther"></router-link>
          </vue-glide-slide>
          <vue-glide-slide>
            <router-link to="/about/4"><img src="@/assets/project/bblctsc.webp" alt="zootopia"></router-link>
          </vue-glide-slide>
          <vue-glide-slide>
            <router-link to="/about/6"><img src="@/assets/project/thgttz.jpg" alt="one strange rock"></router-link>
          </vue-glide-slide>
          <vue-glide-slide>
            <router-link to="/about/7"><img src="@/assets/project/hdnzjnh.webp" alt="one strange rock"></router-link>
          </vue-glide-slide>
          <template slot="control">
            <button data-glide-dir="<" class="absolute w-8 h-8 rounded-full bg-gray-500" style="top:calc(50% - 16px); left: 10px">
              <svg width="18" height="18" viewBox="0 0 24 24" style="margin-left: 6px">
                <path d="M0 12l10.975 11 2.848-2.828-6.176-6.176H24v-3.992H7.646l6.176-6.176L10.975 1 0 12z"></path>
              </svg>
            </button>
            <button data-glide-dir=">" class="absolute w-8 h-8 rounded-full bg-gray-500" style="top:calc(50% - 16px); right: 10px">
              <svg width="18" height="18" viewBox="0 0 24 24" style="margin-left: 6px">
                <path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"></path>
              </svg>
            </button>
          </template>
        </vue-glide>
      </div> <!-- end recommended -->

      <div class="continue-watching px-6 mb-12" id="mhsj">
        <h3 class="text-gray-500 mb-1">梦幻世界 </h3>

        <vue-glide
          :perView="5"
          :gap="20"
          :peek="{ before: 0, after: 70 }"
          :breakpoints="{
            1024: {
              perView: 3
            },
            800: {
              perView: 2,
            },
            576: {
              perView: 1,
              peek: {
                before: 0,
                after: 0,
              }
            }
          }"
        >
          <vue-glide-slide>
            <router-link to="/about/8"><img src="@/assets/project/alice-hero-test.webp" alt="star wars"></router-link>
          </vue-glide-slide>
          <vue-glide-slide>
            <router-link to="/about/9"><img src="@/assets/project/shdr-att-voyage-to-the-crystal-grotto-hero-20210518-new.webp" alt="snow white"></router-link>
          </vue-glide-slide>
          <vue-glide-slide>
            <router-link to="/about/10"><img src="@/assets/project/shdr-att-once-upon-time-adventure-hero-new.webp" alt="zootopia"></router-link>
          </vue-glide-slide>
          <vue-glide-slide>
            <router-link to="/about/11"><img src="@/assets/project/shdr-att-seven-dwarfs-mine-train-hero-new.webp" alt="one strange rock"></router-link>
          </vue-glide-slide>
          <vue-glide-slide>
            <router-link to="/about/12"><img src="@/assets/project/shdr-att-peter-pans-flight-hero-new.webp" alt="one strange rock"></router-link>
          </vue-glide-slide>
          <vue-glide-slide>
            <router-link to="/about/13"><img src="@/assets/project/shdr-att-the-many-adventures-of-winnie-the-pooh-hero-new.jpg" alt="one strange rock"></router-link>
          </vue-glide-slide>
          <template slot="control">
            <button data-glide-dir="<" class="absolute w-8 h-8 rounded-full bg-gray-500" style="top:calc(50% - 16px); left: 10px">
              <svg width="18" height="18" viewBox="0 0 24 24" style="margin-left: 6px">
                <path d="M0 12l10.975 11 2.848-2.828-6.176-6.176H24v-3.992H7.646l6.176-6.176L10.975 1 0 12z"></path>
              </svg>
            </button>
            <button data-glide-dir=">" class="absolute w-8 h-8 rounded-full bg-gray-500" style="top:calc(50% - 16px); right: 10px">
              <svg width="18" height="18" viewBox="0 0 24 24" style="margin-left: 6px">
                <path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"></path>
              </svg>
            </button>
          </template>
        </vue-glide>
      </div> <!-- end continue-watching -->

      <div class="disney-plus-originals px-6 mb-12" id="wq">
        <h3 class="text-gray-500 mb-1">玩具总动员 奇想花园</h3>
        <vue-glide
          :perView="5"
          :gap="20"
          :peek="{ before: 0, after: 70 }"
          :breakpoints="{
            1024: {
              perView: 3
            },
            800: {
              perView: 2,
            },
            576: {
              perView: 1,
              peek: {
                before: 0,
                after: 0,
              }
            }
          }"
        >
          <vue-glide-slide>
            <router-link to="/about/14"><img src="@/assets/project/shdr-att-buzz-lightyear-planet-rescue-hero-new.webp" alt="star wars"></router-link>
          </vue-glide-slide>
          <vue-glide-slide>
            <router-link to="/about/15"><img src="@/assets/project/shdr-att-tron-lightcycle-power-run-hero-new.webp" alt="snow white"></router-link>
          </vue-glide-slide>
          <vue-glide-slide>
            <router-link to="/about/16"><img src="@/assets/project/shdr-att-tron-realm-chevrolet-digital-challenge-hero-new.jpg" alt="zootopia"></router-link>
          </vue-glide-slide>
          <vue-glide-slide>
            <router-link to="/about/17"><img src="@/assets/project/shdr-att-jet-packs-hero-new.jpg" alt="one strange rock"></router-link>
          </vue-glide-slide>
          <vue-glide-slide>
            <router-link to="/about/18"><img src="@/assets/project/shdr-att-stitch-encounter-hero-new.webp" alt="one strange rock"></router-link>
          </vue-glide-slide>
          <vue-glide-slide>
            <router-link to="/about/19"><img src="@/assets/project/shdr-att-fantasia-carousel-hero-new.webp" alt="one strange rock"></router-link>
          </vue-glide-slide>
          <template slot="control">
            <button data-glide-dir="<" class="absolute w-8 h-8 rounded-full bg-gray-500" style="top:calc(50% - 16px); left: 10px">
              <svg width="18" height="18" viewBox="0 0 24 24" style="margin-left: 6px">
                <path d="M0 12l10.975 11 2.848-2.828-6.176-6.176H24v-3.992H7.646l6.176-6.176L10.975 1 0 12z"></path>
              </svg>
            </button>
            <button data-glide-dir=">" class="absolute w-8 h-8 rounded-full bg-gray-500" style="top:calc(50% - 16px); right: 10px">
              <svg width="18" height="18" viewBox="0 0 24 24" style="margin-left: 6px">
                <path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"></path>
              </svg>
            </button>
          </template>
        </vue-glide>
      </div> <!-- end disney-plus-originals -->

      <div class="trending-now px-6 mb-12" id="mrsj">
        <h3 class="text-gray-500 mb-1">明日世界</h3>
        <vue-glide
          :perView="5"
          :gap="20"
          :peek="{ before: 0, after: 70 }"
          :breakpoints="{
            1024: {
              perView: 3
            },
            800: {
              perView: 2,
            },
            576: {
              perView: 1,
              peek: {
                before: 0,
                after: 0,
              }
            }
          }"
        >
          <vue-glide-slide>
            <router-link to="/about/20"><img src="@/assets/project/shdr-att-marvel-universe-hero-new.jpg" alt="star wars"></router-link>
          </vue-glide-slide>
          <vue-glide-slide>
            <router-link to="/about/21"><img src="@/assets/project/shdr-att-dumbo-flying-elephant-hero-new.webp" alt="snow white"></router-link>
          </vue-glide-slide>
          <vue-glide-slide>
            <router-link to="/about/22"><img src="@/assets/project/shdr-att-soaring-hero-new.webp" alt="zootopia"></router-link>
          </vue-glide-slide>
          <vue-glide-slide>
            <router-link to="/about/23"><img src="@/assets/project/shdr-att-camp-discovery-hero-new.webp" alt="one strange rock"></router-link>
          </vue-glide-slide>
          <vue-glide-slide>
            <router-link to="/about/24"><img src="@/assets/project/shdr-att-roaring-rapids-hero-v3.webp" alt="one strange rock"></router-link>
          </vue-glide-slide>
          <template slot="control">
            <button data-glide-dir="<" class="absolute w-8 h-8 rounded-full bg-gray-500" style="top:calc(50% - 16px); left: 10px">
              <svg width="18" height="18" viewBox="0 0 24 24" style="margin-left: 6px">
                <path d="M0 12l10.975 11 2.848-2.828-6.176-6.176H24v-3.992H7.646l6.176-6.176L10.975 1 0 12z"></path>
              </svg>
            </button>
            <button data-glide-dir=">" class="absolute w-8 h-8 rounded-full bg-gray-500" style="top:calc(50% - 16px); right: 10px">
              <svg width="18" height="18" viewBox="0 0 24 24" style="margin-left: 6px">
                <path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"></path>
              </svg>
            </button>
          </template>
        </vue-glide>
      </div>
    </div>
  </div>
</template>

<script>


export default {
  name: 'home',
}
</script>
